<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation -Class/Class.Extras</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Chain">Chain</a></h4>
      <div class="menu-item"><a href="#Chain:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Chain:chain">chain</a></div>
      <div class="menu-item"><a href="#Chain:callChain">callChain</a></div>
      <div class="menu-item"><a href="#Chain:clearChain">clearChain</a></div>
      <h4 class="menu-item"><a href="#Events">Events</a></h4>
      <div class="menu-item"><a href="#Events:addEvent">addEvent</a></div>
      <div class="menu-item"><a href="#Events:addEvents">addEvents</a></div>
      <div class="menu-item"><a href="#Events:fireEvent">fireEvent</a></div>
      <div class="menu-item"><a href="#Events:removeEvent">removeEvent</a></div>
      <div class="menu-item"><a href="#Events:removeEvents">removeEvents</a></div>
      <h4 class="menu-item"><a href="#Options">Options</a></h4>
      <div class="menu-item"><a href="#Options:setOptions">setOptions</a></div>
      <div class="menu-item"><a href="#"></a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Chain"><a href="#Chain">Class: Chain</a></h1>
      <p class="description">A Utility Class which executes functions one after another, with each function firing after completion of the previous.
        Its methods can be implemented with <a href="../../../docs/core/Class/Class.html#Class:implement">Class:implement</a> into any <a href="../../../docs/core/Class/Class.html">Class</a>, and it is currently implemented in <a href="../../../docs/core/Fx/Fx.html">Fx</a> and <a href="../../../docs/core/Request/Request.html">Request</a>.
        In <a href="../../../docs/core/Fx/Fx.html">Fx</a>, for example, it is used to create custom, complex animations.</p>
      <h2 id="Chain:constructor"><a href="#Chain:constructor">Chain Method: constructor</a></h2>
      <h3 class="description">Syntax:</h3>
      <h4>For new classes:</h4>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span> Implements: Chain <span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h4>For existing classes:</h4>
      <pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Chain<span class="br0">)</span>;
</pre>
      <h4>Stand alone</h4>
      <pre class="javascript"><span class="kw2">var</span> myChain = <span class="kw2">new</span> Chain;

</pre>
      <h3>Example:</h3>
      <pre class="javascript">    <span class="kw2">var</span> Todo = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
        Implements: Chain,
        initialize: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

            <span class="kw1">this</span>.<span class="me1">chain</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span>, arguments<span class="br0">)</span>;
        <span class="br0">}</span>
    <span class="br0">}</span><span class="br0">)</span>;

&nbsp;
    <span class="kw2">var</span> myTodoList = <span class="kw2">new</span> Todo<span class="br0">(</span>
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'get groceries'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'go workout'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'code mootools documentation until eyes close involuntarily'</span><span class="br0">)</span>; <span class="br0">}</span>,
        <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'sleep'</span><span class="br0">)</span>; <span class="br0">}</span>

    <span class="br0">)</span>;
</pre>
      <h3>See Also:</h3>
      <ul>
        <li><a href="../../../docs/core/Class/Class.html">Class</a></li>
      </ul>
      <h2 id="Chain:chain"><a href="#Chain:chain">Chain Method: chain</a></h2>
      <p class="description">Adds functions to the end of the call stack of the Chain instance.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">chain</span><span class="br0">(</span>fn<span class="br0">[</span>, fn2<span class="br0">[</span>, fn3<span class="br0">[</span>, ...<span class="br0">]</span><span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>fn - (<em>function</em> or <em>array</em>) The function (or array of functions) to add to the chain call stack. Will accept and number of functions or arrays of functions.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) The current Class instance. Calls to chain can also be chained.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="co1">//Fx.Tween has already implemented the Chain class because of inheritance of the Fx class.</span>
<span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="br0">{</span>property: <span class="st0">'opacity'</span><span class="br0">}</span><span class="br0">)</span>;
myFx.<span class="me1">start</span><span class="br0">(</span><span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">)</span>.<span class="me1">chain</span><span class="br0">(</span>

    <span class="co1">//Notice that "this" refers to the calling object (in this case, the myFx object).</span>
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">this</span>.<span class="me1">start</span><span class="br0">(</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">)</span>; <span class="br0">}</span>

<span class="br0">)</span>; <span class="co1">//Will fade the Element out and in twice.</span>
</pre>
      <h3>See Also:</h3>
      <ul>
        <li> <a href="../../../docs/core/Fx/Fx.html">Fx</a>, <a href="../../../docs/core/Fx/Fx.Tween.html">Fx.Tween</a> </li>
      </ul>
      <h2 id="Chain:callChain"><a href="#Chain:callChain">Chain Method: callChain</a></h2>
      <p class="description">Removes the first function of the Chain instance stack and executes it. The next function will then become first in the array.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">[</span>any arguments<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>Any arguments passed in will be passed to the "next" function.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>mixed</em>) The return value of the "next" function or false when the chain was empty.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> myChain = <span class="kw2">new</span> Chain<span class="br0">(</span><span class="br0">)</span>;
myChain.<span class="me1">chain</span><span class="br0">(</span>
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'do dishes'</span><span class="br0">)</span>; <span class="br0">}</span>,
    <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'put away clean dishes'</span><span class="br0">)</span>; <span class="br0">}</span>

<span class="br0">)</span>;
myChain.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// alerts 'do dishes'.</span>
myChain.<span class="me1">callChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// alerts 'put away clean dishes'.</span>
</pre>
      <h2 id="Chain:clearChain"><a href="#Chain:clearChain">Chain Method: clearChain</a></h2>
      <p class="description">Clears the stack of a Chain instance.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">clearChain</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) The current Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="st0">'color'</span><span class="br0">)</span>; <span class="co1">// Fx.Tween inherited Fx's implementation of Chain.</span>

myFx.<span class="me1">chain</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">while</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"D'oh!"</span><span class="br0">)</span>; <span class="br0">}</span><span class="br0">)</span>; <span class="co1">// chains an infinite loop of alerts.</span>

myFx.<span class="me1">clearChain</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// cancels the infinite loop of alerts before allowing it to begin.</span>
</pre>
      <h3>See Also:</h3>
      <ul>
        <li> <a href="../../../docs/core/Fx/Fx.html">Fx</a>, <a href="../../../docs/core/Fx/Fx.Tween.html">Fx.Tween</a> </li>
      </ul>
      <h1 id="Events"><a href="#Events">Class: Events</a></h1>
      <p class="description">A Utility Class. Its methods can be implemented with <a href="../../../docs/core/Class/Class.html#Class:implement">Class:implement</a> into any <a href="../../../docs/core/Class/Class.html">Class</a>.
        In <a href="../../../docs/core/Fx/Fx.html">Fx</a>, for example, this Class is used to allow any number of functions to be added to the Fx events, like 'complete', 'start', and 'cancel'.
        Events in a Class that implements <a href="#Events">Events</a> must be either added as an option or with addEvent, not directly through .options.onEventName.</p>
      <h3>Syntax:</h3>
      <h4>For new classes:</h4>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span> Implements: Events <span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h4>For existing classes:</h4>
      <pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Events<span class="br0">)</span>;
</pre>
      <h3>Implementing:</h3>
      <ul>
        <li>This class can be implemented into other classes to add its functionality to them.</li>
        <li>Events has been designed to work well with the <a href="#Options">Options</a> class. When the option property begins with 'on' and is followed by a capital letter it will be added as an event (e.g. 'onComplete' will add as 'complete' event).</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>

    Implements: Events,
    initialize: <span class="kw2">function</span><span class="br0">(</span>element<span class="br0">)</span><span class="br0">{</span>
        <span class="co1">// ...</span>
    <span class="br0">}</span>,
    complete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'complete'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">)</span>;
myWidget.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'complete'</span>, myFunction<span class="br0">)</span>;

</pre>
      <h3>Notes:</h3>
      <ul>
        <li>Events starting with 'on' are still supported in all methods and are converted to their representation without 'on' (e.g. 'onComplete' becomes 'complete').</li>
      </ul>
      <h3>See Also:</h3>
      <ul>
        <li> <a href="../../../docs/core/Class/Class.html">Class</a>, <a href="#Options">Options</a> </li>
      </ul>
      <h2 id="Events:addEvent"><a href="#Events:addEvent">Events Method: addEvent</a></h2>
      <p class="description">Adds an event to the Class instance's event stack.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">addEvent</span><span class="br0">(</span>type, fn<span class="br0">[</span>, internal<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>type     - (<em>string</em>) The type of event (e.g. 'complete').</li>
        <li>fn       - (<em>function</em>) The function to execute.</li>
        <li>internal - (<em>boolean</em>, optional) Sets the function property: internal to true. Internal property is used to prevent removal.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) This Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'element'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'start'</span>, myStartFunction<span class="br0">)</span>;

</pre>
      <h2 id="Events:addEvents"><a href="#Events:addEvents">Events Method: addEvents</a></h2>
      <p class="description">The same as <a href="#Events:addEvent">addEvent</a>, but accepts an object to add multiple events at once.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">addEvents</span><span class="br0">(</span>events<span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>events - (<em>object</em>) An object with key/value representing: key the event name (e.g. 'start'), and value the function that is called when the Event occurs.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) This Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'element'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">addEvents</span><span class="br0">(</span><span class="br0">{</span>

    start: myStartFunction,
    complete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Done.'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h2 id="Events:fireEvent"><a href="#Events:fireEvent">Events Method: fireEvent</a></h2>
      <p class="description">Fires all events of the specified type in the Class instance.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">fireEvent</span><span class="br0">(</span>type<span class="br0">[</span>, args<span class="br0">[</span>, delay<span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>type  - (<em>string</em>) The type of event (e.g. 'complete').</li>
        <li>args  - (<em>mixed</em>, optional) The argument(s) to pass to the function. To pass more than one argument, the arguments must be in an array.</li>
        <li>delay - (<em>number</em>, optional) Delay in milliseconds to wait before executing the event (defaults to 0).</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) This Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>

    Implements: Events,
    initialize: <span class="kw2">function</span><span class="br0">(</span>arg1, arg2<span class="br0">)</span><span class="br0">{</span>
        <span class="co1">//...</span>
        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'initialize'</span>, <span class="br0">[</span>arg1, arg2<span class="br0">]</span>, <span class="nu0">50</span><span class="br0">)</span>;
    <span class="br0">}</span>

<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Events:removeEvent"><a href="#Events:removeEvent">Events Method: removeEvent</a></h2>
      <p class="description">Removes an event from the stack of events of the Class instance.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">removeEvent</span><span class="br0">(</span>type, fn<span class="br0">)</span>;

</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>type - (<em>string</em>) The type of event (e.g. 'complete').</li>
        <li>fn   - (<em>function</em>) The function to remove.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) This Class instance.</li>
      </ul>
      <h3>Notes:</h3>
      <ul>
        <li>If the function has the property internal and is set to true, then the event will not be removed.</li>
      </ul>
      <h2 id="Events:removeEvents"><a href="#Events:removeEvents">Events Method: removeEvents</a></h2>
      <p class="description">Removes all events of the given type from the stack of events of a Class instance. If no type is specified, removes all events of all types.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">removeEvents</span><span class="br0">(</span><span class="br0">[</span>events<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>events - (optional) If not passed removes all events of all types.
          <ul>
            <li>(<em>string</em>) The event name (e.g. 'success'). Removes all events of that type.</li>
            <li>(<em>object</em>) An object of type function pairs. Like the one passed to <a href="#Events:addEvents">addEvents</a>.</li>
          </ul>
        </li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) The current Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Tween</span><span class="br0">(</span><span class="st0">'myElement'</span>, <span class="st0">'opacity'</span><span class="br0">)</span>;
myFx.<span class="me1">removeEvents</span><span class="br0">(</span><span class="st0">'complete'</span><span class="br0">)</span>;

</pre>
      <h3>Notes:</h3>
      <ul>
        <li>removeEvents will not remove internal events. See <a href="../../../docs/core/Element/Element.Event.html#Element:removeEvent">Events:removeEvent</a>.</li>
      </ul>
      <h1 id="Options"><a href="#Options">Class: Options</a></h1>
      <p class="description">A Utility Class. Its methods can be implemented with <a href="../../../docs/core/Class/Class.html#Class:implement">Class:implement</a> into any <a href="../../../docs/core/Class/Class.html">Class</a>.
        Used to automate the setting of a Class instance's options.
        Will also add Class <a href="#Events">Events</a> when the option property begins with 'on' and is followed by a capital letter (e.g. 'onComplete' adds a 'complete' event). You will need to call this.setOptions() for this to have an effect, however.</p>
      <h3>Syntax:</h3>
      <h4>For new classes:</h4>
      <pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>Implements: Options<span class="br0">}</span><span class="br0">)</span>;

</pre>
      <h4>For existing classes:</h4>
      <pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>Options<span class="br0">)</span>;
</pre>
      <h2 id="Options:setOptions"><a href="#Options:setOptions">Options Method: setOptions</a></h2>
      <p class="description">Merges the default options of the Class with the options passed in.</p>
      <h3>Syntax:</h3>
      <pre class="javascript">myClass.<span class="me1">setOptions</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments:</h3>
      <ol>
        <li>options - (<em>object</em>, optional) The user defined options to merge with the defaults.</li>
      </ol>
      <h3>Returns:</h3>
      <ul>
        <li>(<em>object</em>) The current Class instance.</li>
      </ul>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: Options,
    options: <span class="br0">{</span>
        color: <span class="st0">'#fff'</span>,
        size: <span class="br0">{</span>

            width: <span class="nu0">100</span>,
            height: <span class="nu0">100</span>
        <span class="br0">}</span>
    <span class="br0">}</span>,
    initialize: <span class="kw2">function</span><span class="br0">(</span>options<span class="br0">)</span><span class="br0">{</span>

        <span class="kw1">this</span>.<span class="me1">setOptions</span><span class="br0">(</span>options<span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">{</span>

    color: <span class="st0">'#f00'</span>,
    size: <span class="br0">{</span>
        width: <span class="nu0">200</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;

<span class="co1">//myWidget.options is now: {color: #f00, size: {width: 200, height: 100}}</span>
</pre>
      <h3>Notes:</h3>
      <ul>
        <li>Relies on the default options of a Class defined in its options property.</li>
      </ul>
      <h2><a href="#">Options in combination with Events</a></h2>
      <p class="description">If a Class has <a href="#Events">Events</a> as well as <a href="#Options">Options</a> implemented, every option beginning with 'on' and followed by a capital letter (e.g. 'onComplete') becomes a Class instance event, assuming the value of the option is a function.</p>
      <h3>Example:</h3>
      <pre class="javascript"><span class="kw2">var</span> Widget = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: <span class="br0">[</span>Options, Events<span class="br0">]</span>,
    options: <span class="br0">{</span>

        color: <span class="st0">'#fff'</span>,
        size: <span class="br0">{</span>
            width: <span class="nu0">100</span>,
            height: <span class="nu0">100</span>
        <span class="br0">}</span>
    <span class="br0">}</span>,
    initialize: <span class="kw2">function</span><span class="br0">(</span>options<span class="br0">)</span><span class="br0">{</span>

        <span class="kw1">this</span>.<span class="me1">setOptions</span><span class="br0">(</span>options<span class="br0">)</span>;
    <span class="br0">}</span>,
    show: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="co1">// Do some cool stuff</span>

&nbsp;
        <span class="kw1">this</span>.<span class="me1">fireEvent</span><span class="br0">(</span><span class="st0">'show'</span><span class="br0">)</span>;
    <span class="br0">}</span>
&nbsp;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
<span class="kw2">var</span> myWidget = <span class="kw2">new</span> Widget<span class="br0">(</span><span class="br0">{</span>

    color: <span class="st0">'#f00'</span>,
    size: <span class="br0">{</span>
        width: <span class="nu0">200</span>
    <span class="br0">}</span>,
    onShow: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>

        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Lets show it!'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
myWidget.<span class="me1">show</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">// fires the event and alerts 'Lets show it!'</span>

</pre>
    </div>
  </div>
 <script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
